import React, {Component} from 'react'
import HKBall from "../../BallStyle/HKBall"

export default class ShengXiao extends Component {
  constructor (props){
   super(props)
   this.state= {
   }
}
order(item){
  this.props.order(item)
}
animalNum(){
  return {
    GOU:["01", "13", "25", "37", "49"],
    HOU:["03", "15", "27", "39"],
    HU:["09", "21", "33", "45"],
    JI:["02", "14", "26", "38"],
    LONG:["07", "19", "31", "43"],
    MA:["05", "17", "29", "41"],
    NIU:["10", "22", "34", "46"],
    SHE:["06", "18", "30", "42"],
    SHU:["11", "23", "35", "47"],
    TU:["08", "20", "32", "44"],
    YANG:["04", "16", "28", "40"],
    ZHU:["12", "24", "36", "48"]
  }
}
getNum(item){
  let id = item.id
  const animal = this.animalNum()
  // let sx = id.replace('YXYZTW-YXXZ-', '');
  let sx = id.split("-")[2]
  let nums = animal[sx];
  // console.log(nums);
  return  nums
}
   render() {
    const {content,select} = this.props
    
   return <div className="peilv">
              <div className="wenzi">
              {
                content.map((item,index)=>{
                  return <li key={index} onClick={()=>{
                        this.order(item)
                  }}
                  className={select[item.id] ? "selected big" : "big"}
                  >
                {/* {isNaN(item.number*1) ? <span className={"noball "+item.id}>{item.number}</span> :
                  <HKBall num={item.number*1}></HKBall>} */}
                  <h5 className={"noball "+item.id}>{item.number}</h5>
                  <div className="qiu">
                  {this.getNum(item).map((num,i)=>{
                    return <HKBall num={num*1} key={i}></HKBall>
                  })}
                  </div>
                  <p className="red">{item.pl}</p></li>
                })
              }
              </div>
        </div>
   }
}